<template>
  <div class="container">
    <!-- 上方导航栏 -->
    <div class="nav">
      <!-- 推荐 -->
      <div
        class="nav-box"
        :class="{ 'nav-box-active': navActive }"
        @click="navActive = true"
      >
        综合推荐
      </div>
      <!-- 筛选 -->
      <div
        class="nav-box"
        :class="{ 'nav-box-active': !navActive }"
        @click="navActive = false"
      >
        筛选
      </div>
    </div>
    <!-- 预约 -->

    <!-- 综合推荐 -->

    <div class="content-recommend">
      <!-- 男 -->
      <div
        class="content-recommend-box"
        v-for="(item, index) in recommendList"
        :key="index"
        @click="goAppoint"
      >
        <div class="content-recommend-box-img">
          <img
            src="../../../static/img/recommed/hot_m.png"
            alt=""
            v-if="item.sex == '男'"
          />
          <img
            src="../../../static/img/recommed/hot_g.png"
            alt=""
            v-if="item.sex == '女'"
          />
        </div>
        <div class="content-recommend-box-details">
          <div class="name">{{ item.name }}</div>
          <div class="tag">{{ item.tag }}</div>
          <div class="bottom">
            <div class="cost">
              <span>￥</span>
              <span>{{ item.cost }}</span>
              <span class="reserve" v-if="item.reserveNum > 0">
                {{ item.reserveNum }}人预约
              </span>
              <span class="reserve" v-else></span>
            </div>
            <!-- <div class="reserve-btn" @click="goAppoint"> -->
            <van-button type="info" @click="goAppoint" size="mini"
              >去预约</van-button
            >
            <!-- </div> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选 -->
    <div class="content-filter" v-if="!navActive">
      <div class="content-filter-box">
        <!-- 性别 -->
        <div class="content-filter-box-item-tag">性别</div>
        <!-- 选项 -->
        <div class="content-filter-box-item-list">
          <div
            class="content-filter-box-item-list-item"
            v-for="(item, index) in sexList"
            :key="index"
          >
            {{ item.sex }}
          </div>
        </div>

        <!-- 价格 -->
        <div class="content-filter-box-item-tag">价格</div>
        <!-- 选项 -->
        <div class="content-filter-box-item-list">
          <div
            class="content-filter-box-item-list-item"
            v-for="(item, index) in priceList"
            :key="index"
          >
            {{ item.price }}
          </div>
        </div>

        <!-- 体检类型 -->
        <div class="content-filter-box-item-tag">体检类型</div>
        <!-- 选项 -->
        <div class="content-filter-box-item-list">
          <div
            class="content-filter-box-item-list-item"
            v-for="(item, index) in typeList"
            :key="index"
          >
            {{ item.type }}
          </div>
        </div>

        <!-- 提交重置 -->
        <div class="content-submit-box">
          <div class="content-submit-box-btn">
            <button class="reset">重置</button>
            <button class="submit">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      navActive: true,
      // 推荐数组
      recommendList: [
        {
          name: "惠民健康体检-女",
          tag: ["仅限女性"],
          sex: "女",
          cost: "323.2",
          reserveNum: 1,
        },
        {
          name: "惠民健康体检-男",
          tag: ["仅限男性"],
          sex: "男",
          cost: "323.2",
          // reserveNum: 1,
        },
      ],
      // 性别数组
      sexList: [
        {
          value: "1",
          sex: "男",
        },
        {
          value: "2",
          sex: "女",
        },
        {
          value: "3",
          sex: "通用",
        },
      ],

      // 价格数组
      priceList: [
        {
          value: "1",
          price: "1000以下",
        },
        {
          value: "2",
          price: "1000-5000",
        },
        {
          value: "3",
          price: "5000-10000",
        },
        {
          value: "4",
          price: "10000以上",
        },
      ],
      // 体检类型数组
      typeList: [
        {
          value: "1",
          type: "普通",
        },
        {
          value: "2",
          type: "VIP",
        },
        {
          value: "3",
          type: "职业病",
        },
        {
          value: "4",
          type: "VVIP",
        },
        {
          value: "5",
          type: "入职体检",
        },
        {
          value: "6",
          type: "过期主场",
        },
        {
          value: "7",
          type: "处级体检",
        },
        {
          value: "8",
          type: "老干体检",
        },
        {
          value: "9",
          type: "雇员体检",
        },
        {
          value: "10",
          type: "优抚对象体检",
        },
        {
          value: "11",
          type: "兵检预检",
        },
        {
          value: "12",
          type: "科技自费",
        },
        {
          value: "13",
          type: "普通体检1区",
        },
        {
          value: "14",
          type: "铁路医保",
        },
      ],
    };
  },
  methods: {
    goAppoint() {
      wx.navigateTo({
        url: "/pages/phyExamApp/singleApp/appointment/index",
      });
    },
  },
};
</script>

<style  lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.nav {
  // position: absolute;
  height: 30px;
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  line-height: 30px;
  font-size: 14px;

  .nav-box {
    flex: 1;
    text-align: center;
    // border: 1px solid red;
  }
  .nav-box-active {
    color: #2d90e9;
  }
}

// 综合推荐
.content-recommend {
  position: absolute;
  width: 100%;
  // border: 1px solid red;
  .content-recommend-box {
    display: flex;
    .content-recommend-box-img {
      // border: 1px solid red;
      height: 100px;
      width: 100px;
      display: flex;
      align-items: center;
      // padding: 10px;
      img {
        width: 70px;
        height: 70px;
        margin: auto;
        // margin: 1px;
        // padding: 1px;
      }
    }
    .content-recommend-box-details {
      // border: 1px solid red;
      width: 100%;
      display: flex;
      // align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 10px;
      .name {
        font-size: 14px;
        // border: 1px solid red;
        width: fit-content;
        // padding: 2px;
        margin-bottom: 6px;
      }
      .tag {
        font-size: 12px;
        // border: 1px solid #ebeef5;
        margin-bottom: 6px;
        width: fit-content;
        padding: 2px;
        background-color: rgb(245, 245, 245);
        border-radius: 4px;
        color: #878588;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        .cost {
          color: rgb(230, 81, 77);
          span:nth-child(1) {
            font-size: 8px;
          }
          .reserve {
            // border: 1px solid red;
            font-size: 12px;
            color: #9b9b9b;
            margin-left: 10px;
          }
        }
      }
      .reserve-btn {
        width: fit-content;
        height: fit-content;
        padding: 0 10px;
        background-color: rgb(50, 146, 233);
        color: #fff;
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        // line-height: 30px;
      }
    }
  }
  .content-recommend-box:nth-child(odd) {
    border-bottom: 1px solid rgb(240, 240, 240);
  }
}

// 筛选
.content-filter {
  position: absolute;
  z-index: 2000;
  // border: 1px solid red;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 40%);

  .content-filter-box {
    // border: 1px solid red;
    width: 80%;
    height: 100%;
    position: absolute;
    right: 0;
    background-color: #fff;

    .content-filter-box-item-tag {
      font-size: 14px;
      color: #a4a4a4;
      // border: 1px solid red;
      width: fit-content;
      padding: 10px;
    }
    .content-filter-box-item-list {
      display: flex;
      // justify-content: space-evenly;
      flex-wrap: wrap;
      // height: fit-content;
      // width: fit-content;
      // padding: 0 10px;
      // border: 1px solid red;
      .content-filter-box-item-list-item {
        border: 1px solid #e1e1e1;
        height: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 85px;
        // flex: 1;
        font-size: 14px;
        padding: 0 4px;
        color: #4a4a4a;
        text-align: center;
        border-radius: 2px;
        margin: 0 4px;
        border-radius: 2px;
        margin: 2px;
      }
    }

    // 提交重置
    .content-submit-box {
      // margin-top: 40px;
      position: absolute;
      bottom: 10%;
      right: 10%;
      .content-submit-box-btn {
        display: flex;
        justify-content: space-around;
        width: 100%;
        // border: 1px solid red;
      }
      button {
        font-size: 14px;
        background-color: #1989fa;
        color: #fff;
        padding: 0 40px;
      }
      .reset {
        font-size: 14px;
        background-color: #1989fa;
        color: #fff;
        padding: 0 40px;
      }
      .submit {
        font-size: 14px;
        background-color: #1989fa;
        color: #fff;
        padding: 0 40px;
        margin-left: 10px;
      }
    }
  }
}
</style>
